<template>


	<view class="home">

		<!--展示区  -->

		<view class="tan-main-wrap">
			<view class="tan-list-box">

				<!--轮播图-->
				<swiper indicator-dots circular autoplay="true" style="height: 400px;width: 100%;">
					<swiper-item v-for="item in swipers" :key="item.id" style="overflow:auto;">
						<image class="logo" :src="item.pic" mode="aspectFill"></image>
					</swiper-item>
				</swiper>

				<view class="" style="display: flex; margin-top: 10px; margin-left: 30px;">
					<!-- 下一个按钮 -->
					<view @click="buxihuan" style="border: 1px solid #F14399; width: 40%; height: 40px; border-radius: 30px; 
               display: flex; justify-content: center; align-items: center;">
						<text>下一个</text> <!-- 直接使用 <text>，去掉多余的 <view> -->
					</view>

					<!-- 喜欢/开始聊天按钮 -->
					<view @click="isEach ? startChat() : xihuan()" style="border: 1px solid #F14399; width: 40%; height: 40px; border-radius: 30px; 
               display: flex; justify-content: center; align-items: center; 
               background-color: #F14399; margin-left: 30px;">
						<text style="color: #fff;">{{ isEach ? '开始聊天' : '喜欢' }}</text> <!-- 直接使用 <text> -->
					</view>
				</view>

				<view class="tan-list-title">
					<text style="font-weight:bold;font-size: 26px;">{{ products.nickname }},{{ products.age }}</text>岁
				</view>

				<view class="occupation" style="text-align: center;">
					<view
						style=" margin-left: 15px;color: #4D4D4D;font-size: 14px;border: 1px solid #007AFF;border-radius:3px;">
						<text style="color: #007AFF;">{{ is_rz }}</text>
					</view>
				</view>


				<view class="occupation" style="text-align: center;margin-top: 20px;">
					<view class="occupation_l">
						<text>职业：{{ products.occupation }}</text>
					</view>
					<view class="occupation_l">
						<text>学历：{{ products.education }}</text>
					</view>
					<view class="occupation_l">
						<text>身高：{{ products.height }}</text>
					</view>
				</view>



				<view class="" style="margin-top: 10px;margin-bottom: 10px;">
					<text style="color: #FF4A6A;font-weight:bold;margin-left: 10px;font-size: 12px;">关于我</text>
				</view>

				<view class="" style="padding-bottom: 30px;margin: 0 10px;">
					<text style="margin-left: 10px;font-size: 14px;color: #A1A1A1;">{{ products.about_me }}</text>
				</view>

			</view>

		</view>

		<view class="dibu_nav">

			<view class="dibu_nav1">
				<button type="default" @click="gotoindex('/pages/index/index')"
					style="background-color: #F14399;color: #fff;">首页</button>
			</view>
			<view class="dibu_nav2">
				<button type="default" @click="gotomy('/pages/my/my')"
					style="background-color: #F14399;color: #fff;">我的</button>
			</view>

		</view>

	</view>
</template>


<script>

export default {
	data() {
		return {
			swipers: [],
			products: [],
			is_rz: "",
			id: "",
			isEach: false // 新增状态，表示是否相互喜欢
		}
	},
	onLoad(option) {
		this.id = option.id
		this.is_rz = option.is_rz
		this.getSwipers()
		this.getproducts()
	},
	methods: {
		// 获取轮播图的数据
		async getSwipers() {
			const res = await this.$myRuquest({
				url: '/index/dsnv.activities/images_show?id=' + this.id
			})

			this.swipers = res.data.date
		},
		async startChat() {
			const myId = uni.getStorageSync('my_info').id;

			// 创建或获取会话
			const res = await this.$myRuquest({
				url: '/index/dsnv.chat/getOrCreateSession',
				method: 'POST',
				data: {
					user1_id: myId,
					user2_id: this.id
				}
			});

			if (res.data.code === 200) {
				uni.navigateTo({
					url: `/pages/chat/detail?session_id=${res.data.data.id}&other_user_id=${this.id}`
				});
			} else {
				uni.showToast({
					title: '创建会话失败',
					icon: 'none'
				});
			}
		},
		async xihuan() {
			const launchFlag = uni.getStorageSync('my_info');
			const res = await this.$myRuquest({
				url: '/index/dsnv.index/love?pid=' + this.id + "&uid=" + launchFlag.id
			})
			if (res.data.code == 200) {
				this.isEach = res.data.is_each == 1; // 更新相互喜欢状态

				if (res.data.is_each == 0) {
					uni.showToast({
						title: "喜欢成功",
						duration: 3000,
						icon: 'none'
					})
				} else {
					uni.showToast({
						title: "相互喜欢，可以聊天了",
						duration: 3000,
						icon: 'none'
					})
				}
			}

		},
		async buxihuan() {
			const res = await this.$myRuquest({
				url: '/index/dsnv.index/no_love?id=' + this.id
			})

			if (res.data.code == 200) {
				uni.navigateTo({
					url: "/pagesA/details/details?id=" + res.data.id + "&is_rz=" + res.data.is_rz
				})

			}

		},

		//获取用户信息
		async getproducts() {
			const resw = await this.$myRuquest({
				url: '/index/dsnv.index/product_xq?id=' + this.id
			})
			this.products = resw.data.data
		},
		//跳转到我的.
		gotomy(url) {

			uni.switchTab({
				url: url
			})
		},
		//首页
		gotoindex(url) {
			uni.switchTab({
				url: url
			})
		},
	}
}
</script>

<style lang="scss">
.home {
	background-color: #F6F6F6;

	swiper {
		width: 750rpx;
		height: 380rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.sex {
		margin: 5px;

		display: flex;

		.sex_l {
			width: 33%;
			padding: 8px
		}
	}

	.tan-main-wrap {
		display: flex;
		flex-flow: column wrap;
		height: 100Vh;
	}

	.tan-list-box {

		margin: 0px 10px;
		background-color: #fff;
		border-radius: 8px;

		overflow: hidden;
		-ms-box-shadow: 0px 3px 5px #DDDDDD;
		-moz-box-shadow: 0px 3px 5px #DDDDDD;
		-webkit-box-shadow: 0px 3px 5px #DDDDDD;
		box-shadow: 0px 3px 5px #DDDDDD;

		.occupation {
			display: flex;
			margin-top: 10px;

			.occupation_l {
				width: 30%;
				margin-left: 10px;
				background-color: #F1F1F1;
				border-radius: 5px;
			}
		}
	}


	.tan-img-pic {
		width: 100%;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.tan-list-title {
		margin: 20rpx;
		font-size: 28rpx;
	}

	padding-bottom: 60px;
}

.dibu_nav {
	margin: 0px 10px;

	.dibu_nav1 {
		padding: 0px 10px;
		width: 46%;
		position: fixed;
		bottom: 0px;
		left: 0px;
	}

	.dibu_nav2 {
		padding: 0px 10px;
		width: 46%;
		position: fixed;
		bottom: 0px;
		right: 0px;
	}

}
</style>
